<template>
  <el-main>
    <el-card shadow="never">
      <el-tabs tab-position="top">
        <el-tab-pane label="普通打印">
          <el-alert
            title="打印当前页面已存在的元素,如包含.no-print样式就忽略,分页打印就需要{page-break-after: always}控制"
            type="success"
            style="margin-bottom: 20px"
          />
          <el-button
            type="primary"
            @click="print"
          >
            普通打印
          </el-button>
          <div style="height: 20px" />
          <div
            ref="printMain"
            class="printMain"
          >
            <div class="item">
              打印内容1 <el-icon><el-icon-eleme-filled /></el-icon>
              <p class="no-print">
                忽略打印
              </p>
            </div>
            <div style="page-break-after: always" />
            <div class="item">
              打印内容2
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="动态打印">
          <el-alert
            title="打印创建的DOM结构,适用于远程获取模板后打印"
            type="success"
            style="margin-bottom: 20px"
          />
          <el-button
            type="primary"
            @click="print2"
          >
            动态打印
          </el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </el-main>
</template>

<script>
import print from "@/utils/print";

export default {
  name: "Print",
  data() {
    return {};
  },
  methods: {
    print() {
      //直接传入REF或者querySelector
      print(this.$refs.printMain);
    },
    print2() {
      //创建虚拟DOM结构后再传入
      var dom = "<h2>TITLE</h2><p>后创建的DOM结构</p>";
      print(dom);
    },
  },
};
</script>

<style scoped>
.printMain .item {
  padding: 20px;
  border: 1px solid #409eff;
  margin-bottom: 20px;
  background: #ecf5ff;
  border-radius: 4px;
}
.printMain p {
  margin-top: 20px;
  color: #999;
}
</style>
